<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <div class="form-setting-group form-common-setting">
      <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>
      <div class="form-design-warning">{{$t('common.form.tip.materialVerifyEliminate.tips1')}}</div>
    </div>
    <!-- end 标题 -->
    
    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->
    
    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- 结算规则设置 S -->
    <div class="form-setting-group form-common-setting" v-if="isShowSettlementRules">
      <h4 class="form-item-title">{{ $t('zhongqi.setting.text2') }}</h4>
      <div class="form-item-box">{{ $t('zhongqi.setting.text1') }}</div>
      <settlement-rules ref="settlementRules" @saveRule="saveRule" :fields="fields" :field="field"/>
    </div>
    <!-- 结算规则设置 E -->
    <!-- start 物料关联显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('common.form.preview.material.label2') }}</h4>
      <div class="form-item-box">
        <div class="form-setting-item">
          <el-select
            class="form-material-verify-select"
            :value="materialFieldsValue(field)"
            multiple
            :multiple-limit="10"
            @change="columsSelectHandler"
          >
            <el-option
              v-for="item in materialVerifyEliminateColums"
              :key="item.field"
              :label="item.label"
              :value="item.field"
              :disabled="checkFieldDisabledHandler(item.field)"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 物料关联显示字段 -->

    <!-- 其他设置 start -->
    <div class="form-setting-group form-setting-item" v-if="allowPublicSet">
      <h4 class="form-item-title">{{$t('common.base.otherSet')}}</h4>
      <!-- 是否需要填写被替换物料 start -->
      <div class="form-item-box">
        <el-checkbox :value="field.setting.replacedMaterialCheck" @input="updateSetting(...arguments,'replacedMaterialCheck')">
          {{$t('common.form.tip.materialVerifyEliminate.tips2')}}
        </el-checkbox>
      </div>
      <!-- 是否需要填写被替换物料 end -->
      <!-- 仅可从物料申领中添加物料 start -->
      <div class="form-item-box">
        <el-checkbox :value="field.setting.onlyFromMaterial" @input="updateSetting(...arguments,'onlyFromMaterial')">
          {{$t('common.form.tip.materialVerifyEliminate.tips6')}}
        </el-checkbox>
      </div>
      <!-- 仅可从物料申领中添加物料 end -->
      <div class="form-item-box">
        <el-checkbox v-if="isAreaPrice" :value="field.setting.useRegionalPricing" @input="updateSetting(...arguments,'useRegionalPricing')">
          {{$t('common.base.useRegionalPricing')}}
        </el-checkbox>
      </div>

      <!-- 核销后是否在客户名下生成新产品 start-->
      <div class="form-item-box">
        <el-checkbox :value="field.setting.createNewProduct" @input="updateSetting(...arguments,'createNewProduct')">
          {{$t('common.form.tip.materialVerifyEliminate.createProductTips')}}
          <el-tooltip  placement="top" popper-class="form-msg-setting-tooltip">
            <div slot="content">
              <div class="tooltip">{{$t('common.form.tip.materialVerifyEliminate.createProductTips1')}}</div>
            </div>
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </el-checkbox>
      </div>
      <!-- 核销后是否在客户名下生成新产品 end-->

      <!-- 二次确认表单字段 start-->
      <div v-if="field.setting.createNewProduct" class="form-setting-item">
        <h4 class="form-item-title">{{$t('common.form.tip.materialVerifyEliminate.reconfirmTitle')}}</h4>
        <el-select
          class="form-material-verify-select"
          :value="reconfirmValue(field)"
          multiple
          @change="reconfirmColumsHandler"
        >
          <el-option
            v-for="item in reconfirmColums"
            :key="item.field"
            :label="item.label"
            :value="item.field"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </div>
      <!-- 二次确认表单字段 end-->

      <!-- 无物料消耗备注 start-->
      <div class="form-item-box">
        <el-checkbox :value="field.setting.noDataPlaceHolderSwitch" @input="updateNoDataPlaceHolderSetting(...arguments, 'noDataPlaceHolderSwitch')">
          {{$t('common.form.tip.materialVerifyEliminate.noDataRemark')}}
        </el-checkbox>
      </div>
      <div v-show="field.setting.noDataPlaceHolderSwitch" class="form-type-text-lang">
        <el-input :value="defaultNoDataPlaceHolder" @input="handleInput"></el-input>
        <base-select-language 
          v-if="isShow"
          :title="$t('common.base.description')"
          :field="field"
          :is-require="false"
          :defaultOption="{
            formType:'text',
          }"
          :maxlength="TitleShowMaxLengthMax"
          defaultFormType="text"
          :defaultValue="defaultNoDataPlaceHolder"
          :defaultValueLanguage="noDataPlaceHolder || {}"
          @save="save"
        >
        </base-select-language>
      </div>
      <!-- 无物料消耗备注 end-->

      <!-- start 慈星定制 配件结算方式 -->
      <div class="form-item-box" v-if="isCiXing">
        <el-checkbox :value="field.setting.isShowSettleType" @input="updateSettleType">配件结算方式</el-checkbox>
        <div class="settlement-method-list" v-show="field.setting.isShowSettleType">
          <div class="settlement-method-list-item" v-for="(option, index) in field.setting.settleTypeOptions" :key="index">
            <el-input :value="option" disabled></el-input>
          </div>
        </div>
      </div>
      <!-- end 慈星定制 配件结算方式 -->
    </div>
    <!-- 其他设置 end -->
  </div>
</template>

<script>
import { languagesList, isMultiLangModules } from '@src/component/util/multiLang/index';
import * as config from '@src/component/form/config';
import locales, { t } from '@src/locales';

import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';

import SettlementRules from '@src/component/form/components/FormServiceIterm/components/SettlementRules.vue';
import { getRootWindow } from '@src/util/dom';
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'

// util
import { findComponentUpward } from '@src/util/assist';
import { MATERIAL_VERIFY_ELIMINATE_SETTLE_TYPE_OPTIONS } from '@src/component/form/config';

export default {
  name: 'form-materialverifyeliminate-setting',
  mixins: [SettingMixin],
  props: settingProps,
  components: {
    [SettlementRules.name]: SettlementRules
  },
  data(){
    
    return {
      languagesList,
      systemFields: [],
      reconfirmFixedFieldValues: ['name', 'serialNumber', 'catalogId'],
      noDataPlaceHolderData: {
        zh: '',
        en: ''
      }
    }
  },
  methods: {
    save(data){
      this.noDataPlaceHolder = data
      this.updateSetting(data, 'noDataPlaceHolder')
    },
    handleInput(value) {
      this.noDataPlaceHolder[locales.locale] = value
      this.updateNoDataPlaceHolderSetting(this.noDataPlaceHolder, 'noDataPlaceHolder')
    },
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    },
    updateNoDataPlaceHolderSetting(value, type) {
      this.$set(this.field.setting, type, value)
      this.$set(this.field.setting, 'noDataPlaceHolder', this.noDataPlaceHolder)
    },
    // 更新setting
    updateSetting(value, type){
      this.$set(this.field.setting, type, value)
    },
    // 保存质保规则
    saveRule(value) {
      this.update(value, 'ruleList', true);
    },
    /**
    * @description 回执信息-物料核销必选字段
    * 
    */
    checkFieldDisabledHandler(item) {
      return this.fixedFieldValues.includes(item);
    },
    // 更新setting
    columsSelectHandler(val){
      const selectField = this.materialVerifyEliminateColums.filter(x => val.some(v => v === x.field));
      this.updateSetting(selectField, 'materialFields');
    },
    materialFieldsValue(field){
      const selectVal = field?.setting?.materialFields?.map(x => x.field) || [];

      // 无值时候设置默认值 - 必选字段设置
      if(selectVal.length <= 0){
        let newValue = [...this.fixedFieldValues, ...selectVal];
        this.columsSelectHandler(newValue)
        return newValue;
      }

      // 有值时需过滤掉已被删除的关联显示字段
      let selectMateriaValue = selectVal.filter(item => {
        let index = this.materialVerifyEliminateColums.findIndex(
          field => item === field.field
        );
        return index > -1;
      });

      return selectMateriaValue;
    },
    /**
    * @description 二次确认关联选中字段
    */
    reconfirmValue(field){
      const selectVal = field?.setting?.showFields?.map(x => x.field) || []
      return [...new Set([...this.reconfirmFixedFieldValues, ...selectVal])]
    },
    reconfirmColumsHandler(val){
      const selectField = this.reconfirmColums.filter(x => val.some(v => v === x.field))
      this.updateSetting(selectField, 'showFields')
    },
    // 更新配件结算方式
    updateSettleType(value) {
      this.update(value, 'isShowSettleType', true)

      // 设置默认结算方式
      if (!this.field?.setting?.settleTypeOptions?.length) {
        this.update(MATERIAL_VERIFY_ELIMINATE_SETTLE_TYPE_OPTIONS, 'settleTypeOptions', true)
      }
    },
  },
  computed: {
    noDataPlaceHolder() {
      return this.field?.setting?.noDataPlaceHolder || this.noDataPlaceHolderData
    },
    defaultNoDataPlaceHolder() {
      return this.noDataPlaceHolder[locales.locale]
    },
    // 描述信息展示最大数量
    TitleShowMaxLengthMax() {
      return config.FIELD_PLACEHOLER_LENGTH_MAX;
    },
    // 事件表单+回执表单显示多语言配置
    isShow() {
      const isOpenMultiLanguage = getOpenMultiLanguage()
      return isOpenMultiLanguage && isMultiLangModules(this.mode) && this.field.formType !== 'relationCustomer' && this.field.formType !== 'relationProduct';
    },
    isShowSettlementRules() {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.settlementRule || false
    }, 
    // 固定选项-物料核销必选字段
    fixedFieldValues(){
      return ['name', 'sn'];
    },
    /**
    * @description 二次确认关联字段
    */
    reconfirmColums() {
      return [
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel1'), field: 'name', disabled: true, width: 200 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel2'), field: 'serialNumber', disabled: true, width: 200 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel3'), field: 'catalogId', disabled: true, width: 200 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel4'), field: 'customer' },
        // { label: this.$t('common.form.tip.materialReturn.reconfirmLabel5'), field: 'qualityStatus' },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel6'), field: 'qualityStartTime', width: 200 },
        { label: this.$t('common.form.tip.materialReturn.reconfirmLabel7'), field: 'qualityEndTime', width: 200 }
      ]
    },
    /**
    * @description 回执信息-物料核销可选字段
    */
    materialVerifyEliminateColums() {
      let { materialFiels } = findComponentUpward(this, 'form-design') || {};


      const materialArr = materialFiels.map((item) => {
        return {
          ...item,
          label: item.displayName,
          field: item.fieldName,
          isSystem: item.isSystem,
          formType: item?.setting?.originalFormType
        }
      })?.filter(item => !['logistics'].includes(item?.setting?.originalFormType)) ?? []

      return materialArr;
    },
    // 是否开启区域定价灰度
    isAreaPrice() {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.areaPrice
    },
    // 慈星灰度
    isCiXing() {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.CIXING_MATERIAL_SETTLE
    },
  },
  mounted() {
    if(!this.field?.setting?.showFields?.length){
      this.reconfirmColumsHandler(this.reconfirmFixedFieldValues)
    }
  },
}
</script>
<style lang="scss" scoped>
.form-material-verify-select {
  width: 100%;
}
::v-deep .el-select {
  .el-tag__close {
    display: none;
  }
}
.form-type-text-lang{
  display: flex;
  align-items: center;
  textarea {
    flex: 1;
  }
  p{
    width: 32px;
    height: 32px;
    background: #F5F8FA;
    border-radius: 4px;
    border: 1px solid #CBD6E2;
    text-align: center;
    line-height: 30px;
    margin-left: 8px;
    .iconfont{
      font-size: 18px;
      color: #595959;
    }
  }
}
</style>